<template>
<!-- 会员管理 -->
  <div id="Administration">
    <div id="management">
      <!--搜索框 -->
      <div id="manage-top">
        <el-select v-model="allPages.searchstatus" clearable placeholder="请选择用户状态">
          <el-option
            style="height:46px"
            v-for="item in state"
            :key="item.index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="allPages.searchlevel" clearable placeholder="请选择等级">
          <el-option
            style="height:46px"
            v-for="item in member"
            :key="item.index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="allPages.searchgender" clearable placeholder="请选择性别">
          <el-option
            style="height:46px"
            v-for="item in options"
            :key="item.index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input placeholder="请输入ID" v-model="allPages.input"></el-input>
        <el-input placeholder="请输入昵称" v-model="allPages.value"></el-input>
        <button type="button" class="el-button el-button--primary" @click="management()">
          <i class="el-icon-search"></i>
          <span>查找</span>
        </button>
      </div>
      <div id="button">
        <button type="button" class="el-button el-button--primary" @click="additions()" v-Promise="'system:user:create'">
          <div>
            <i class="el-icon-edit"></i>
            <span>添加用户</span>
          </div>
        </button>
      </div>
      <!-- 数据操作 -->
      <div id="manage-bottom">
        <el-table
          border
          :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          :key="id"
        >
          <el-table-column label="用户ID" prop="id"></el-table-column>
          <el-table-column label="昵称" prop="nickname"></el-table-column>
          <el-table-column label="手机号码" prop="phone"></el-table-column>
          <el-table-column label="性别" prop="gender">
            <template slot-scope="scope">
              <el-tag>{{scope.row.gender|format()}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="会员等级" prop="level">
            <template slot-scope="scope">
              <el-tag>{{scope.row.level==0?"普通会员":"VIP会员"}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="生日" prop="birthday"></el-table-column>
          <el-table-column label="状态" prop>
            <template slot-scope="scope">
              <el-tag>{{scope.row.status|status()}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="上次登入时间">
            <template slot-scope="scope" prop="gmtCreate">{{scope.row.gmtCreate | formatDate()}}</template>
          </el-table-column>
          <el-table-column label="上次登入ID" prop="lastLoginIp"></el-table-column>
          <el-table-column align="right" label="操作" width="250px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="status(scope.$index,scope.row)"
                class="kohlrabiblue"
                v-Promise="admin.user.updateStatus"
              >{{scope.row.status|statusreverse()}}</el-button>
              <el-button
                size="mini"
                @click="compile(scope.$index,scope.row)"
                class="kohlrabiblue"
                v-Promise="'system:user:update'"
              >编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)" v-Promise="'admin.user.deleteUser'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div id="block">
        <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages="allPages"></Paging>
      </div>
      <div>
        <!-- 添加编辑弹框 -->
        <el-dialog :title="titleName" :visible.sync="dialogFormVisible">
          <!-- 登录 -->
          <div class="loginRight">
            <div class="login-right">
              <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item prop="nickname">
                  <div class="login-img">用户昵称</div>
                  <el-input v-model.number="ruleForm.nickname" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item prop="phone">
                  <div class="login-img">手机号码</div>
                  <!-- 手机号 -->
                  <el-input v-model.number="ruleForm.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <div class="login-img">用户密码</div>
                  <!-- 密码 -->
                  <el-input
                    placeholder="请输入密码"
                    show-password
                    v-model="ruleForm.password"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <!-- 用户性别 -->
                <el-form-item label="用户性别">
                  <el-select v-model="ruleForm.gender" placeholder="请选择用户性别">
                    <el-option
                      style="height:46px"
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <!-- 会员等级 -->
                <el-form-item label="会员等级">
                  <el-select v-model="ruleForm.level" placeholder="请选择会员等级">
                    <el-option
                      style="height:46px"
                      v-for="item in member"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <!-- 用户状态 -->
                <el-form-item label="用户状态">
                  <el-select v-model="ruleForm.status" placeholder="请选择用户状态">
                    <el-option
                      style="height:46px"
                      v-for="item in state"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="affirm()">
              <div>确 定</div>
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import user from "@/api/user.js";
import Paging from "../../components/Paging"; //分页
import qs from "qs";
export default {
  components: {
    Paging
  },
  data() {
    //   账号
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空！"));
      } else {
        callback();
      }
    };
    //密码
    var validatePass = (rule, value, callback) => {
      let pass = /^[0-9]{6,18}$/;
      if (!value) {
        callback(new Error("密码不能为空,请输入密码！"));
      }
      if (!pass.test(value)) {
        return callback(new Error("密码必须是数字6~18位"));
      } else {
        callback();
      }
    };
    //手机号
    var message = (rule, value, callback) => {
      let mark = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (!value) {
        return callback(new Error("手机号不能为空！"));
      }
      if (!mark.test(value)) {
        return callback(new Error("手机号必须是1开头的数字号码！"));
      } else {
        callback();
      }
    };
    return {
      options: [
        {
          value: "1",
          label: "女"
        },
        {
          value: "2",
          label: "男"
        },
        {
          value: null,
          label: "全部"
        }
      ],
      state: [
        {
          value: "0",
          label: "冻结"
        },
        {
          value: "1",
          label: "激活"
        },
        {
          value: null,
          label: "全部"
        }
      ],
      member: [
        {
          value: "0",
          label: "普通会员"
        },
        {
          value: "1",
          label: "VIP会员"
        },
        {
          value: null,
          label: "全部"
        }
      ],
      //

      id: "",
      search: "",
      tableData: [{}],
      tableDatas: [],
      itemsid: [{}],
      adminid: [], //admin
      dialogTableVisible: false,
      dialogFormVisible: false, //弹窗口
      FormVisible: false, //弹窗口
      titleName: "", //是否添加还是编辑
      allPages: {
        currentPage: 1, //当前的默认的页数
        eachpage: 10, //默认的页码
        total: 0, //初始值共数据条
        totalPageNo: 1,
        // 查询
        searchstatus: "",
        searchlevel: "",
        searchgender: "",
        value: "",
        input: ""
      }, //分页
      value1: [],
      form: {
        name: "",
        region: "",
        delivery: false,
        type: [],
        resource: "",
        nickname: "",
        phone: ""
      },
      roleIds: "",
      ruleForm: {
        nickname: "",
        password: "",
        phone: "",
        roleIds: "",
        level: "",
        status: "",
        gender: "",
        id: ""
      },
      rules: {
        password: [
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        nickname: [
          {
            validator: checkAge,
            trigger: "blur"
          }
        ],
        phone: [
          {
            validator: message,
            trigger: "blur"
          }
        ]
      },
      ischecked: false,
      DataID: [{}]
    };
  },
  //时间戳
  filters: {
    formatDate: function(value) {
      let date = new Date(value);
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      return MM + "月" + d + "日 " + h + "时" + m + "分";
    },
    format: function(value) {
      return value == 2 ? "男" : "女";
    },
    status: function(value) {
      return value == 0 ? "冻结" : "激活";
    },
    statusreverse: function(value) {
      return value == 0 ? "激活" : "冻结";
    }
  },

  methods: {
    //编辑
    compile(index, row) {
      this.dialogFormVisible = true;
      this.titleName = "编辑";
      this.modalType = "update";
      this.ruleForm = {...row}
      this.ruleForm.gender = row.gender == 2 ? "男" : "女";
      this.ruleForm.status = row.status == 0 ? "冻结" : "激活";
      this.ruleForm.level = row.level == 0 ? "普通会员" : "VIP会员";
    },
    handles(val) {
      this.allPages = val;
      this.management();
    },
    //添加
    additions() {
      this.titleName = "添加";
      this.modalType = "add";
      this.dialogFormVisible = true;
      this.ruleForm={}
    },
    // 管理员数据列表
    management() {
      let _this = this;
      user.user(_this.allPages).then(function(res) {
        console.log(res)
        _this.tableData = res.data.data.items;
        // 分页
        _this.allPages.currentPage = res.data.data.pageNo;
        _this.allPages.eachpage = res.data.data.pageSize;
        _this.allPages.total = res.data.data.total;
        _this.allPages.totalPageNo = res.data.data.totalPageNo;
      });
    },
    // 判断是否添加还是编辑
    affirm() {
      let _this = this;
      //添加
      if (_this.titleName === "添加") {
      }
      // 编辑
      if (_this.titleName === "编辑") {
        user.compile(_this.ruleForm).then(function(res) {
          _this.management()
          _this.$information.success("这是一条编辑成功的提示消息")
        });
      }
      _this.dialogFormVisible = false;
    },
    // 删除
    handleDelete(index, row) {
      var _this = this;
      // 提示框
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.$information.success("这是一条删除成功的提示消息")
        let data = {
          id: _this.tableData[index].id,
          nickname: row.nickname
        };
        user.handleDeletec(data).then(function(res) {
          console.log(res);
          _this.tableData.splice(index, 1);
        });
      });
    },
    //状态
    status(index, row) {
      let _this = this;
      let data = {
        userId: row.id,
        status: row.status //状态
      };
      user.status(data).then(function(res) {
        console.log(res);
        _this.$information.success("这是一条操作成功的提示消息")
        // 判断是否冻结还是激活
        if (row.status === 1) {
          row.status = 0;
        } else {
          row.status = 1;
        }
        for (const i in _this.tableData) {
          if (_this.tableData[i].id === row.id) {
            _this.tableData[i].status = row.status;
          }
        }
        
      });
    }
  },
  created() {
    this.management();
  },
   watch:{
    dialogFormVisible(){
      this.$nextTick(() => {
       this.$refs.ruleForm.clearValidate();
      })
    }
  }
};
</script>

<style>
#Administration {
  width: 100%;
  height: 100%;
}
#management {
  width: 80vw;
  height: 80vh;
  margin: auto;
}
/* 搜索框 */
#manage-top {
  width: 50vw;
  display: flex;
  margin-bottom: 30px;
}
#manage-top .el-input__inner {
  width: 200px;
}
#role-top .el-select {
  margin-right: 12px;
}
.el-input {
  width: 210px;
  margin-right: 13px;
}

/*  */
#button {
  margin: 20px 0px;
}

/* 表格样式*/
#block {
  margin-top: 30px;
}
.kohlrabiblue {
  background: #66b1ff;
  color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
  text-align: center;
}
.el-table/deep/th.is-sortable {
  cursor: pointer;
  text-align: center;
}
.el-table td,
.el-table/deep/th.is-leaf {
  text-align: center;
}
/*  */
.loginRight {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0px 8px 8px 0px;
}
.login-right {
  width: 80%;
  margin: auto;
}
.loginRight .login-title {
  color: #333;
  margin-bottom: 40px;
  font-weight: 500;
  font-size: 22px;
  text-align: center;
  letter-spacing: 4px;
  margin-top: 40px;
}
.el-form-item/deep/input {
  background: transparent;
  border-radius: 0;
  color: #333;
  display: inline;
}
.el-form-item {
  position: relative;
}
.el-form-item/deep/i {
  display: inline;
}
.login-img {
  position: absolute;
  top: 2px;
  left: -60px;
}

.el-checkbox {
  width: 300px;
  margin: 20px 0px 30px 0px;
}
/*  */
</style>